<template>
  <el-row>
    <el-col :span="8">
      <h3>Draggable 1</h3>

      <draggable
        class="dragArea list-group"
        :list="list1"
        :group="{ name: 'people', pull: 'clone', put: false }"
        :move="onMove"
        @end="onEnd"
        item-key="data1"
      >
        <template #item="{ element }">
          <div class="list-group-item" :key="element.id">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </el-col>

    <el-col :span="8">
      <h3>Draggable 2</h3>
      <draggable
        class="dragArea list-group"
        :list="list2"
        group="people"
        item-key="data2"
      >
        <template #item="{ element }">
          <div class="list-group-item" :key="element.id">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </el-col>

    <el-col :span="8">
      <h3>Draggable 3</h3>
      <draggable
        class="dragArea list-group"
        :list="list3"
        group="people"
        item-key="data3"
      >
        <template #item="{ element }">
          <div class="list-group-item" :key="element.id">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </el-col>



    <div id="msg1"></div>
    <div> {{JSON.stringify(list2)}}</div>
  </el-row>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "custom-clone",
  display: "Custom Clone",
  order: 3,
  components: {
    draggable
  },
  data() {
    return {
      draggedContext:{},
      relatedContext: {},
      list1: [
        {systemName: "dog 1",name: "dog 1", id: 1},
        {systemName: "dog 2",name: "dog 2", id: 2},
        {systemName: "dog 3",name: "dog 3", id: 3},
        {systemName: "dog 4",name: "dog 4", id: 4}
      ],
      list2: [
        // {systemName: "dog 5",name: "dog 5", id: 5},
        // {systemName: "dog 6",name: "dog 6", id: 6},
        // {systemName: "dog 7",name: "dog 7", id: 7},
        {systemName: "dog 4",name: "dog 4", id: 4}
      ],
      list3:[]
    };
  },
  methods: {
    onMove: function (evt, originalEvent) {
      this.relatedContext = evt.relatedContext
      this.draggedContext = evt.draggedContext
      // return false 将来取消拖拽;
      return false;
    },
    onEnd(){
      const arr = this.relatedContext.list
      const element = this.draggedContext.element
      const items = arr.filter(item => {
        return element.systemName == item.systemName
      })
      if (items.length < 1) {
        arr.splice(this.relatedContext.index, 0, element);
        // this.refreshName(arr[index])
        return true
      }
      this.$message.warning("当前添加维度或度量已存在【" + items[0].systemName + "】")
    }
  },
  watch:{
    list3:{
      deep:true,
      handler(){
        this.$message.warning("list3变换了")
      }
    }
  }
};
</script>
<style scoped></style>
